<extend name="Base/common"/>
<block name="style">
<style type="text/css">
    .head{
        width:100%;
        height:65%;
        margin-top:35%;
        padding-top: 5px;
    }
    .formtijiao{
        width:93%;
        height:100%;
        margin:auto; 

    }
    label{
        display: block;
        height:33px;
        margin-top: 5px;
    }
    label input{
        width:68%;
        float: right;
        border:0px;
        font-size: 14px;
        border-bottom:1px solid #ccc;
    }
    label img{
        width:68%;
        height:97%;
        float: right;
        border-radius: 3px 3px;
        border:1px dashed #999;
        margin-top: -20px;
    }

    .tips{
        position:fixed;
        top:0px;
        background: rgba(0,133,208,0.5);
        width:100%;
        color:#fff;
        font-size:16px;
        text-align: left;
        text-indent: 2em;
        line-height:30px;
        z-index: 99;
    }
    .change_p{
        position: fixed;
        width:100%;
        height:100%;
        top:0;
        background: rgba(0,0,0,0.5);
        display: none;
    }
    .changeform{
        width:70%;
        /*height:200px;*/
        background: #fff;
        margin-top: 20%;
        margin-left: 15%;
        border-radius: 5px 5px;
        padding-top:10px;
    }

    .changeform label{
        display: block;
        height:45px;
        font-size: 15px;
        line-height: 30px;

    }
    .changeform input{
        width:65%;
        height: 30px;
        float: left;
    }
    .top{
        height:20%;
        width: 90%;
        margin: auto;
        background: #ccc;
    }


   
</style>
</block>
<block name="body">
    <p class="tips"></p>
         <style>
                @keyframes move_wave {
                    0% {
                        transform: translateX(0) translateZ(0) scaleY(1)
                    }
                    50% {
                        transform: translateX(-25%) translateZ(0) scaleY(0.55)
                    }
                    100% {
                        transform: translateX(-50%) translateZ(0) scaleY(1)
                    }
                }
                .waveWrapper {
                    height:20%;
                    overflow: hidden;
                    position: fixed;
                    left: 0;
                    right: 0;
                    /*bottom: 0;*/
                    top: 0;
                    margin: auto;
                }
                .waveWrapperInner {
                    position: absolute;
                    width: 100%;
                    overflow: hidden;
                    height: 100%;
                    /*bottom: -1px;*/
                    background-image: linear-gradient(to top, #0085d0 20%,#79bbe0 50%);
                }
                .bgTop {
                    z-index: 15;
                    opacity: 0.5;
                }
                .bgMiddle {
                    z-index: 10;
                    opacity: 0.75;
                }
                .bgBottom {
                    z-index: 5;
                }
                .wave {
                    position: absolute;
                    left: 0;
                    width: 200%;
                    height: 100%;
                    background-repeat: repeat no-repeat;
                    background-position: 0 bottom;
                    transform-origin: center bottom;
                }
                .waveTop {
                    background-size: 50% 100px;
                }
                .waveAnimation .waveTop {
                  animation: move-wave 3s;
                   -webkit-animation: move-wave 3s;
                   -webkit-animation-delay: 1s;
                   animation-delay: 1s;
                }
                .waveMiddle {
                    background-size: 50% 120px;
                }
                .waveAnimation .waveMiddle {
                    animation: move_wave 10s linear infinite;
                }
                .waveBottom {
                    background-size: 50% 100px;
                }
                .waveAnimation .waveBottom {
                    animation: move_wave 15s linear infinite;
                }
        </style>
    <div class="waveWrapper waveAnimation">
        
      <div class="waveWrapperInner bgTop">
        <p style="font-size:20px;line-height:40px;position:fixed;top:0;text-indent: 7em;color:#000">商户入驻</p>
        <div class="wave waveTop" style="background-image: url('__IMG__/wave-top.png')"></div>
      </div>
      <div class="waveWrapperInner bgMiddle">
        <div class="wave waveMiddle" style="background-image: url('__IMG__/wave-mid.png')"></div>
      </div>
      <div class="waveWrapperInner bgBottom">
        <div class="wave waveBottom" style="background-image: url('__IMG__/wave-bot.png')"></div>
      </div>
    </div>

    <div class="head">
        <form class="formtijiao" method="post" action="">
            <label>
                店铺名称：
                <input type="text" name="shop_name" placeholder="请输入">
            </label>

            <label style="">
                代理推广码：
                <input type="text" name="tg_num" placeholder="请输入" value="{$tgm}">
            </label>
            <label>
                支付宝账号：
                <input type="text" name="alipay" placeholder="请输入邮箱格式或手机号码格式" class="alipay">
            </label>

            <label>
                手机号码：
                <input type="text" name="phone" class="mobile" placeholder="请输入">
            </label>
            
            <label>
                设置密码：
                <input type="password" name="password" placeholder="请输入">
            </label>
            <label>
                确认密码：
                <input type="password" name="npassword" placeholder="请输入">
            </label>

            <label>
                姓名：
                <input type="text" name="name" class="name" placeholder="请输入">
            </label>
            <label>
                身份证号：
                <input type="text" name="identify" class="identify" placeholder="请输入">
            </label>

            <input type="hidden" name="code" class="code" placeholder="请输入">

           <!--  <label>
                手机验证码：
                
                <input type="button" class="get_code" style="width:30%;float:right;font-size:13px;background:#FF3030;" value="获取验证码">
                <input type="text" name="code" style="width:38%;float:right;" >
            </label> -->
 
            <button class="login-btn"  type="button" style="margin-top:13px;" >提 交</button>
            
        </form>

    </div>

    <div class="change_p">
        
        <div  class="changeform">
            <label style="margin-top:5px;">
                <h4 style="text-align:center">请输入短信验证码</h4>
                
            </label>
            <div style="height:40px;width:80%;margin-left:10%">
                <input type="text" name="code" id="code" style="">
                <input type="button" class="get_code login-btn" style="width:35%;margin:0;border-radius:inherit;font-size:15px;line-height:30px;" value="发送">
               
            </div> 
            <p style="padding:0 10%;font-size:11px;color:#bfbfbf;height:50px;">短信已发送至您的手机，请注意查收并及时填写。</p>
            <p class="submit" style="border-top:1px solid #bfbfbf;height:40px;font-size:15px;color:#0085d0;line-height:40px;text-align:center;">
                确 认
            </p>
            
    </div>

    
</block>



<block name="script">
    <script type="text/javascript">
var time=5;
var i;




    $("input").change(function(){
        var alipay    =$('input[name="alipay"]').val()
        var shop_name =$('input[name="shop_name"]').val()
        var tg_num    =$('input[name="tg_num"]').val()
        var phone     =$('input[name="phone"]').val()
        var password  =$('input[name="password"]').val()
        var npassword =$('input[name="npassword"]').val()
        var name      =$('input[name="name"]').val()
        var identify  =$('input[name="identify"]').val()
        if(alipay.length>0&&shop_name.length>0&&tg_num.length>0&&phone.length>0&&password.length>0&&npassword.length>0&&name.length>0&&identify.length>0){
                var data=$('form').serializeArray();
                
                $.ajax({
                    type:'post',
                    url:"{:U('Koubei/verify2')}",
                    data:data,
                    success:function(m){
                        if(m==1){
                            $('.login-btn').addClass('log_submit');
                        }else{
                            $('.login-btn').removeClass('log_submit');
                            $('.tips').html(m)
                            setTimeout(function(){
                                $('.tips').html('')
                            },3000)
                        }
                        
                    }
                })
        }else{
           $('.login-btn').removeClass('log_submit');
        }
        
        
    });

$('#code').change(function(){
    
    $('.code').val($(this).val())
})

    $('.submit').click(function(){
        var data=$('form').serializeArray();
            $.ajax({
                type:'post',
                data:data,
                url:"{:U('yonghu2')}",
                success:function(m){
                    // alert(m)
                    if(m==1){
                        $('.submit').hide()
                        $('.tips').html('您的手机号将作为登录账号')
                        $('.tips').show()
                        setTimeout(function(){
                            $('.tips').hide()
                            $('.change_p').hide()
                            location.href="{:U('login')}"
                            
                        },3000)
                    }else if(m==0){
                        $('.tips').html('保存失败')
                        $('.tips').show()
                        setTimeout(function(){
                            $('.tips').hide()
                            location.reload()
                            
                        },3000)
                    }else{
                        $('.tips').html(m)
                        $('.tips').show()
                        setTimeout(function(){
                            $('.tips').hide()
                            location.reload()
                            
                        },3000)
                    }
                }
            })
    })
  
        $('form').on('click','.log_submit',function(){
            $('.change_p').show()
        })        
        // $('.log_submit').click(function(){
            
        // })

        //点击隐藏
        $(".changeform").click(function(e){
            $(this).show();
            e.stopPropagation();//阻止冒泡
        });
        $('.change_p').click(function(){
            $(".change_p").hide();
         
        })


        $('.get_code').click(function(){
                var _this=$(this)


                var mobile = $('.mobile').val();//手机号码
                
                $.ajax({
                    type:'post',
                    url:"{:U('Koubei/zc_code')}",
                    data:{'mobile':mobile,'type':1},
                    success:function(m){
                        if(m==11){
                            $('.tips').html('验证码已发送，请注意查收')
                            $('.tips').show()
                            
                            i=setInterval(function(){
                                if(time>0){
                                    _this.unbind("click")
                                    _this.val(time+'s')
                                    time--
                                }else{
                                    clearInterval(i)
                                    _this.val('重发')
                                    time=5
                                    _this.bind("click")
                                }
                                
                            },1000)                            
                            setTimeout(function(){
                                $('.tips').hide()
                                
                            },3000)

                        }else{
                            $('.tips').html(m)
                            $('.tips').show()
                            setTimeout(function(){
                                $('.tips').hide()
                                
                            },3000)
                        }
                    }
                });

        });
    </script>


</block>